<!--
 * @Autor: Kadia
 * @Date: 2021-07-01 14:13:01
 * @LastEditors: Kadia
 * @Connect: nefukadia@foxmail.com
 * @LastEditTime: 2021-07-02 10:45:28
-->

<template>
    <div>
        <div id="min-div" v-loading="loading">
            <div class="title">添加菜品</div>
            <div style="display:flex;align-item:center;justify-content:space-around;">
                <el-input class="item" v-model="add.dishName" placeholder="请输入菜品名称" clearable />
                <el-input-number step-strictly :min="0" class="item" v-model="add.price"></el-input-number>
                <el-select class="item"  v-model="add.discount">
                    <el-option v-for="item in options" :key="item.value" 
                    :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-upload class="item" :action="action" ref="upload" :show-file-list="false"
                :on-success="upLoad" accept="image/jpeg,image/png">
                    <img class="image" v-if="add.image!='#'" :src="add.image">
                    <el-button v-else>添加图片</el-button>
                </el-upload>
                <el-button @click="onSubmit">确认添加</el-button>
            </div>
            <el-table :lazy="true" :data="list" >
                <el-table-column prop="dishName" label="菜品名" align="center" />
                <el-table-column label="折扣" align="center">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.discount" @change="changeType(scope.row)">
                            <el-option v-for="item in options" :key="item.value" 
                            :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="价格" align="center" />
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" :disabled="!scope.row.changed" type="success" icon="el-icon-check" circle @click="onSave(scope.row)"></el-button>
                        <el-popconfirm confirm-button-text='确定' cancel-button-text='点错了'
                            icon="el-icon-info" title="确定要删除吗" @confirm="onDelete(scope.row)">
                            <el-button slot="reference" size="mini" type="danger" icon="el-icon-delete" circle ></el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            action:this.myConfig.manageApiUrl+'/upload.php',
            loading:true,
            list:[],
            options:[
                {
                    value:0.1,
                    label:'一折'
                },
                {
                    value:0.2,
                    label:'二折'
                },
                {
                    value:0.3,
                    label:'三折'
                },
                {
                    value:0.4,
                    label:'四折'
                },
                {
                    value:0.5,
                    label:'五折'
                },
                {
                    value:0.6,
                    label:'六折'
                },
                {
                    value:0.7,
                    label:'七折'
                },
                {
                    value:0.8,
                    label:'八折'
                },
                {
                    value:0.9,
                    label:'九折'
                },
                {
                    value:1.0,
                    label:'不打折'
                }
            ],
            add:{
                dishName:'',
                price:0,
                discount:1,
                image:'#'
            }
        }
    },
    created(){
        const that=this;
        that.getDishInfo();
    },
    methods: {
        //get
        getDishInfo(){
            const that=this;
            that.loading=true;
            that.$axios({
                url:that.myConfig.manageApiUrl+'/getDishInfo.php',
                params:{
                    shopId:this.myConfig.shopId,
                }
            }).then(function(res){
                that.loading=false;
                console.log(res);
                if(res.data.errCode==200){
                    that.list=res.data.list;
                }else{
                    that.$message.warning('系统繁忙，请稍后再试');
                }
            }).catch(function(err){
                that.$message.warning('系统繁忙，请稍后再试');
            });
        },
        //上传图片
        upLoad(res) {
            const that=this;
            console.log(res.url);
            that.add.image=res.url;
        },
        //提交
        onSubmit(){
            const that=this;
            if(that.add.dishName==''||that.add.discount==''||that.add.image=='#'){
                that.$message.warning('请完善菜品信息');
                return ;
            }
            that.loading=true;
            that.$axios({
                url:that.myConfig.manageApiUrl+'/addDish.php',
                method:'post',
                data:{
                    add:that.add,
                    shopId:that.myConfig.shopId
                }
            }).then(function(res){
                that.loading=false;
                console.log(res);
                if(res.data.errCode==200){
                    that.$message.success('添加成功');
                    that.getDishInfo();
                    that.add={dishName:'',price:0,discount:1,image:'#'};
                }else{
                    that.$message.warning('不可以添加重复的菜品名');
                }
            }).catch(function(err){
                that.$message.warning('系统繁忙，请稍后再试');
            });
        },
        //改变
        changeType(info){
            info.changed=true;
        },
        //保存
        onSave(info){
            const that=this;
            console.log(info);
            that.loading=true;
            that.$axios({
                url:that.myConfig.manageApiUrl+'/updateDiscount.php',
                method:'post',
                data:{
                    shopId:that.myConfig.shopId,
                    dishName:info.dishName,
                    discount:info.discount
                }
            }).then(function(res){
                that.loading=false;
                if(res.data.errCode==200){
                    that.$message.success('保存成功');
                    that.getDishInfo();
                }else
                    that.$message.warning('系统繁忙，请稍后再试');
            }).catch(function(err){
                that.$message.warning('系统繁忙，请稍后再试');
            })
        },
        //删除
        onDelete(info){
            const that=this;
            that.loading=true;
            that.$axios({
                url:that.myConfig.manageApiUrl+'/deletedish.php',
                method:'post',
                data:{
                    shopId:that.myConfig.shopId,
                    dishName:info.dishName
                }
            }).then(function(res){
                that.loading=false;
                if(res.data.errCode==200){
                    for(let i=0;i<that.list.length;i++){
                        if(that.list[i].dishName==info.dishName){
                            that.list.splice(i,1);
                            break;
                        }
                    }
                    that.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                }else
                    that.$message.warning('系统繁忙，请稍后再试');
            }).catch(function(){
                that.$message.warning('系统繁忙，请稍后再试');
            })
        },
    }
}
</script>
<style scoped>
    .item{
        width:20%;
    }
    .image{
        width: 20px;
        height: 20px;
    }
</style>